<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="content-table-box">
                <div class="content_table_title_box">
                    <img src="@/assets/icon-data.png" class="content_table_title_icon">
                    <div class="content_table_title">一级分类列表</div>
                </div>
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <!-- <el-form-item label="客户昵称" style="margin-bottom: 0;">
                            <el-input v-model="searchForm.name" placeholder="请输入客户昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" style="margin-bottom: 0;">
                            <el-input v-model="searchForm.tell" placeholder="请输入联系电话"></el-input>
                        </el-form-item> -->
                        <el-form-item style="margin-bottom: 0;">
                            <el-button type="primary" @click="edit(0,'add')">新建一级分类</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table_box">
                    <el-table
                        :data="tableData"
                        style="width: 100%;"
                        height="92%">
                        <el-table-column
                        label="图标"
                        width="200">
                            <template slot-scope="scope">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="scope.row.iconPic"
                                    fit="fill">
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="名称"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        label="是否显示"
                        width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.isShow==1?'显示':'不显示' }}</span>
                            <el-button @click="openTips(scope.row.id,1,scope.row.isShow)" type="text" size="medium " style="margin-left: 10px;color: #FF8F00;">{{ scope.row.isShow==0?'显示':'隐藏' }}</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="level"
                        label="排序（数字越大越靠前）"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        width="450">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row.id,'edit')" type="text" size="medium ">编辑</el-button>
                            <el-button @click="openTips(scope.row.id,2,0)" type="text" size="medium " style="color: #FF0101;">删除</el-button>
                            <el-button @click="lookSecond(scope.row.id)" type="text" size="medium " style="color: #26933A;">查看二级分类</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
            </div>
        </div>
        <tips-box
          ref="tipsBox"
          @confirmTip="confirmTip"
        ></tips-box>
        <add-sort
            ref="addSort"
            @close="
                getData();
            "
        ></add-sort>
        <sort-list2
            ref="sortList2"
        ></sort-list2>
    </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
import showAddressBox from "@/components/showAddressBox.vue";
import tipsBox from "@/components/tipsBox.vue";
import addSort from "@/components/addSort.vue";
import sortList2 from "@/components/sortList2.vue";
export default {
    components: {
    Pagination,
    showAddressBox,
    tipsBox,
    addSort,
    sortList2
  },
  data() {
    return {
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData: [],
        boxIsShow:false,
        searchForm:{
            name:'',
            tell:''
        },
        editForm:{
            id:0,
            type:1,
            ishow:0
        }
    };
  },
  methods: {
    __init() {
      this.getData();
    },
    getData(){
      var url="manager/getSortByPage";
      var params={
        pageSize: this.pageSize,
        pageNum: this.pageNumber,
        parentId:0
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.total = res.data.total;
          this.tableData=res.data.list;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    pageChange(e) {
      this.pageNumber = e.page;
      this.getData();
    },
    lookSecond(id){
      if (this.$refs.sortList2) {
        this.$refs.sortList2.tkIsShow=true;
        this.$refs.sortList2.title="二级分类列表";
        this.$refs.sortList2.__init(id);
      }
    },
    openTips(id,type,ishow){
        this.editForm={
            id:id,
            type:type,
            ishow:ishow
        }
        var tipContent="";
        if(type==1){
            tipContent="确定修改此分类的显示状态吗？"
        }else if(type==2){
            tipContent="确定要删除此分类吗？"
        }
        if (this.$refs.tipsBox) {
            // 显示当前详情
            this.$refs.tipsBox.tkIsShow = true;
            this.$refs.tipsBox.title = "温馨提示";
            this.$refs.tipsBox.tipContent=tipContent;
        }
    },
    closeTips(){
        if (this.$refs.tipsBox) {
            // 显示当前详情
            this.$refs.tipsBox.tkIsShow = false;
        }
    },
    confirmTip(){
        if(this.editForm.type==1){
            //执行修改显示状态
            this.updateSortStatusById();
        }else if(this.editForm.type==2){
            //执行删除
            this.deleteSortById();
        }
    },
    updateSortStatusById(){
        var url="manager/updateSortStatusById";
        var params={
            id: this.editForm.id,
            isShow: this.editForm.ishow
        }
        this.$post(url, params).then((res) => {
            console.log(res)
            if (res.code === 0) {
                this.$message.success(res.msg)
                this.getData();
                this.closeTips();
            } else {
                this.$message.error(res.msg)
            }
        });
    },
    deleteSortById(){
        var url="manager/deleteSortById";
        var params={
            id: this.editForm.id
        }
        this.$post(url, params).then((res) => {
            console.log(res)
            if (res.code === 0) {
                this.$message.success(res.msg)
                this.getData();
                this.closeTips();
            } else {
                this.$message.error(res.msg)
            }
        });
    },
    edit(id,str){
        if(str=='add'){
            if (this.$refs.addSort) {
                this.$refs.addSort.tkIsShow = true;
                this.$refs.addSort.title = "新增一级分类";
                this.$refs.addSort.__init("add",0,0,1);
            }
        }else{
            if (this.$refs.addSort) {
                this.$refs.addSort.tkIsShow = true;
                this.$refs.addSort.title = "编辑一级分类";
                this.$refs.addSort.__init("edit",id,0,1);
            }
        }
    }
  }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .content-table-box{
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgba(83, 83, 83, 0.1);
  }
  .content_table_title_box{
    position: relative;
    height: 30px;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
  }
  .content_table_title_icon{
    position: absolute;
    left: 15px;
    height: 18px;
    top: 6px;
  }
  .content_table_title{
    position: absolute;
    line-height: 34px;
    height: 100%;
    font-size: 15px;
    color: #42484e;
    left: 40px;
  }
  .table_search_box{
    text-align: left;
    margin-top: 10px;
    margin-left: 2%;
  }
  .table_box{
    height: calc(100% - 100px);
    margin-top: 10px;
    width: 96%;
    margin-left: 2%;
  }
  ::v-deep .el-form--inline .el-form-item__content{
    width: 140px;
  }
  ::v-deep .el-select>.el-input{
    width: 120px;
  }
</style>